@include b(carousel-card) {
    position: relative;
    z-index: 1;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    list-style: none;

    @include e('swiper-list') {
        position: relative;
        z-index: 1;
        padding: 0;
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
        list-style: none;
    }

    @include e(swiper-main) {
        position: relative;
        z-index: 1;
        box-sizing: content-box;
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease-in-out;
        transition-property: transform;

        img {
            display: block;
            display: inline-block;
            flex-shrink: 0;
            border-radius: 4px;
            box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
        }
    }

    @include e(leftBtn) {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        height: 100%;
        background-image: linear-gradient(90deg, #fff 0%, #fff0);
        transition: .4s;
    }

    @include e(rightBtn) {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        height: 100%;
        background-image: linear-gradient(270deg, #fff 0%, rgb(255 255 255 / 0%));
        transition: .4s;
    }


    @include e(dot) {
        z-index: 1;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }


    @include e(dot-item) {
        width: 8px;
        height: 8px;
        margin-right: 8px;
        cursor: pointer;
        background: #eee;
        border-radius: 4px;
        transition: all .5s ease;

        &.isActive {
            width: 16px;
            background: #6698ff;
        }
    }
}